<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <input type="text">
  <input type="button" value="前面添加">
  <input type="button" value="后面添加">
  <input type="button" value="关羽前面">
  <input type="button" value="关羽后面">
  <input type="button" value="删除">
  <ul>
    <li>刘备</li>
    <li id="d1">关羽</li>
    <li>张飞</li>
  </ul>
  <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
			//给第一个按钮添加点击事件
			$("input:eq(1)").click(function() {
				var li = $("<li></li>");
				//修改li的文本内容为 用户输入的内容
				li.text($("input:first").val());
				//添加到ul的最前面
				$("ul").prepend(li);
			});
			$("input:eq(2)").click(function() {
				var li = $("<li></li>");
				li.text($("input:first").val());
				$("ul").append(li);
			});
			$("input:eq(3)").click(function() {
				var li = $("<li></li>");
				li.text($("input:first").val());
				$("li:contains('关羽')").before(li);
			});
			$("input:eq(4)").click(function() {
				var li = $("<li></li>");
				li.text($("input:first").val());
				$("li:contains('关羽')").after(li);
			});
			$("input:eq(5)").click(function() {
				$("li:contains('关羽')").remove();
			});
		</script>
</body>
</html>